<template>
	<view>
		<cyqGrid :col="1" textColor="green" :dataList="dataList1" @clickItem="clickItem"></cyqGrid>
		<cyqGrid :col="2" textColor="red" :dataList="dataList2" @clickItem="clickItem"></cyqGrid>
		<cyqGrid :col="3" textColor="red" :dataList="dataList3" @clickItem="clickItem"></cyqGrid>
		<cyqGrid :col="4" textColor="red" :dataList="dataList4" @clickItem="clickItem"></cyqGrid>
		<cyqGrid :col="5" textColor="red" :dataList="dataList5" @clickItem="clickItem"></cyqGrid>
		<cyqGrid :col="6" textColor="red" :dataList="dataList6" @clickItem="clickItem"></cyqGrid>
		<cyqGrid :col="7" textColor="red" :dataList="dataList7" @clickItem="clickItem"></cyqGrid>
		<cyqGrid  textColor="red" :dataList="dataList7" @clickItem="clickItem"></cyqGrid>
	</view>
</template>

<script>
	import cyqGrid from '../../components/cyq-grid.vue'
	export default {
		components: {
			cyqGrid
		},
		data() {
			return {
				dataList1: [],
				dataList2: [],
				dataList3: [],
				dataList4: [],
				dataList5: [],
				dataList6: [],
				dataList7: [],
			}
		},
		async onLoad() {
			// #ifdef APP-PLUS
			await this.getSysInfo()
			let sysInfo = uni.getStorageSync("sysInfo");
			console.log(sysInfo);
			// #endif
			for (let i = 0; i <= 7; i++) {
				const temp = new Array(i).fill({
					title: '标题',
					src: '../../static/logo.png'
				})
				this[`dataList${i}`] = temp
			}
		},
		methods: {
			clickItem(data) {
				console.log(data);
			},

			async getSysInfo() {
				const wgtInfo = await this.getWgtInfo()
				const locationInfo = await this.getLocationInfo()
				const info = await this.getIMEIInfo()
				console.log(info);
				let sysInfo = {
					deviceName: plus.device.vendor || '',
					deviceModel: plus.device.model || '',
					imei: plus.device.imei || '',
					longitude: locationInfo.longitude || '',
					latitude: locationInfo.latitude || '',
					logonAddress: locationInfo.addresses || '',
					appVersion: wgtInfo.version || ''
				}
				uni.setStorageSync("sysInfo", sysInfo)
			},
			getWgtInfo() {
				return new Promise((resolve, reject) => {
					plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
						resolve(wgtinfo)
					}, (e) => {
						reject(e)
					})
				})
			},
			getLocationInfo() {
				return new Promise((resolve, reject) => {
					uni.getLocation({
						type: 'wgs84',
						success: (res) => {
							resolve(res)
						},
						fail: (e) => {
							reject(e)
						}
					});
				})
			},
			getIMEIInfo() {
				return new Promise((resolve, reject) => {
					plus.device.getInfo({
						success: function(e) {
							resolve(e)
						},
						fail: function(e) {
							reject(e)
						}
					});
				})
			}
		}
	}
</script>

<style lang="scss">
	.list {
		display: flex;
		flex-wrap: wrap;
		padding: 10px 0;

		.item {
			width: 20%;
			text-align: center;
			padding: 5px 0px;
			height: 100%;

			image {
				width: 88rpx;
				height: 88rpx;
			}

			.title {
				text-align: center;
				line-height: 20px;
				word-wrap: break-word;
			}
		}
	}
</style>
